<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css">

    <style type="text/css">
        /* .pic-cont {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 233px;
            border: 1px dashed #d9d9d9;
            background-image: url(../../images/add.png);
            background-size: 50px;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .J-user-header-img {
            width: auto;
            height: 100%;
        } */
        .layui-layer-imgbar,
        .layui-layer-imguide {
            display: block !important;
        }

        .uploadImgDiv {
            height: 112px;
            overflow: hidden;
            line-height: 80px;
        }
       
        #Images li {
            width: 23%;
            height: 150px;
            margin: 10px 0.5%;
            display: inline-block;
            overflow: hidden;
            transition: all ease 0.5s;
            -webkit-transition: all ease 0.5s;
            box-shadow: 0 2px 10px #D1D1D1;
        }

        #Images li:hover {
            box-shadow: 0 2px 10px #D1D1D1;
        }

        #Images li:hover img {
            transform: scale(1.1);
        }

        #Images li img {
            width: 100%;
            height: 130px;
            cursor: zoom-in;
            -o-object-fit: cover;
            object-fit: cover;
            transition: all ease 0.5s;
            -webkit-transition: all ease 0.5s;
        }

        #Images li .operate {
            display: block;
            height: 40px;
            width: 100%;
            background: #fff;
        }

        #Images li .operate .check {
            float: left;
            margin-left: 11px;
            height: 18px;
            padding: 11px 0;
            width: 74%;
            position: relative;
        }

        #Images li .operate .check .layui-form-checkbox[lay-skin=primary] {
            width: 100%;
        }

        #Images li .operate .check .layui-form-checkbox[lay-skin=primary] span {
            padding: 0 5px 0 0px;
            width: 100%;
            box-sizing: border-box;
        }

        #Images li .operate .check .layui-form-checkbox[lay-skin=primary] i {
            position: absolute;
            left: 0;
            top: 0;
        }

        #Images li .operate .img_del {
            float: right;
            margin: 9px 11px 0 0;
            font-size: 22px !important;
            cursor: pointer;
        }

        #Images li .operate .img_del:hover {
            color: #f00;
        }

        @media screen and (max-width:1050px) {
            #Images li {
                width: 23%;
            }
        }

        @media screen and (max-width: 750px) {
            #Images li {
                width: 47%;
                margin: 1.5%;
            }

            #Images li .operate .img_del {
                margin: 9px 2px 0 0;
            }
        }

        @media screen and (max-width:432px) {
            #Images li .operate .check .layui-form-checkbox[lay-skin=primary] span {
                font-size: 12px;
            }
        }
   
    </style>
</head>

<body class="tbody">
    <form class="layui-form layui-form-pane layui-container layui-col-space10" lay-filter="dataform">
        <input type="text" class="layui-input" autocomplete="off" name="id" style="display: none;">
        <div class="layui-col-xs12">
            <div class="layui-form-item">
                <label class="layui-form-label">拍卖名称</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" autocomplete="off" lay-verify="required" name="name"
                        placeholder="请输入活动名称">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">拍卖开始时间</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" autocomplete="off" lay-verify="required" id="dt">
                </div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <input type="file" id="J-update-img-file" style="display: none" />
                <div class="pic-cont">
                </div>
            </div> -->
            <div class="layui-form-item layui-form-text">
                <div class="layui-form-label" style="display: flex;">
                    <div style="flex:1;">详情图片</div>
                    <div class="layui-btn layui-btn-xs" data-type="addImg" id="addImg">+添加</div>
                </div>
                <ul class="layer-photos-demo" id="Images"></ul>
            </div>
        </div>
        <div class="layui-input-block layui-right" style="position: fixed; bottom: 13px; right: 13px;">
            <button class="layui-btn " lay-submit="" lay-filter="save" data-type="editPrize">下一步</button>
        </div>
    </form>
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.form.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
	<script type="text/javascript" src="../../js/jsCtl.js"></script>
    <script type="text/javascript" src="../../js/compressImg.js"></script>
    <script type="text/javascript" src="edit.js"></script>
</body>

</html>